<template>
	<view class="page flex-col">

		<view class="group_5">
			<view class="box_6 flex-row " v-for="(item,index) in dataInfo.productDetailResponseList" :key="index">
				<image class="image_3" referrerpolicy="no-referrer" :src="item.image" />
				<view class=" flex-col justify-between" style="margin-left: 20rpx;width: 50%;white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
">
					<view class="" style="white-space: nowrap;
  overflow: hidden;
      width: 100%;
  text-overflow: ellipsis; ">{{item.skuName}}</view>
					<view class="" style="white-space: nowrap;
  overflow: hidden;
      width: 100%;
  text-overflow: ellipsis; ">{{item.yield}}</view>
				</view>
			</view>

		</view>
		<view class="dk">

			<text class="text_14">选择地块</text>
			<view class="box_8 flex-row justify-between">
				<view class="dk-wrap">

					<view class="box_9 flex-row" :class="dkIndex==index?'activeDk':''"
						v-for="(item,index) in dataInfo.areaList" @click="dkBtn(item,index)" :key="index">
						<view class="text-group_1 flex-col" :class="item.isFull==true?'over':''">
							<text class="text_16">{{item.areaName}}</text>
							<text class="text_17" v-if="item.isFull">售罄</text>
						</view>
					</view>
				</view>

			</view>
			<view class="box_10">
				<view class="text_20" @click="lookDk">
					{{islookDk==true?'收起↑':'查看地块分布↓'}}
				</view>
				<!-- v-if="islookDk==true" -->
				<view class="dkLook" v-if="islookDk==true">

					<image v-for="(item,index) in dkData.imageList" :src="item" mode=""></image>
					<!-- <view class="" >
						
						
					</view> -->

				</view>
			</view>

		</view>
		<!-- 	<view class="" style="margin: 20rpx 0;">
			<coupotList :preOrderNo="preOrderNo" @getCountId="getCountId"></coupotList>
		</view> -->

		<view class="ding">

		</view>
		<view class="foot">
			<view class="group_10 flex-col" v-if="dataInfo.packageType=='党支部认养'||dataInfo.packageType=='企业认养'">
				<div class="section_6 flex-col"></div>
				<view class="text-wrapper_9 flex-row">
					<text class="text_22">企业名称:</text>
					<view class="inpu">
						<input type="text" v-model="companyName" placeholder="请输入您所在企业名称">
					</view>


				</view>

			</view>

			<view class="group_11 flex-row justify-between">
				<view class="group_12 flex-col justify-between">
					<view class="text-wrapper_10 flex-row justify-between">
						<text class="text_24">合计:</text>
						<text class="text_25 bc">¥{{allPrice}}</text>
					</view>
					<view class="box_14 flex-row">
						<text class="text_26">优惠券：</text>
						<view class="text-wrapper_11">
							<text class="text_27">-</text>
							<text class="text_28">￥</text>
						</view>
						<text class="text_29">{{priceData.couponFee||0}}</text>
						<view class="section_8 flex-col"></view>
					</view>
					<view class="box_14 flex-row">
						<text class="text_26">会员优惠：</text>
						<view class="text-wrapper_11">
							<text class="text_27">-</text>
							<text class="text_28">￥</text>
						</view>
						<text class="text_29">{{priceData.vipDiscountFee||0}}</text>
						<view class="section_8 flex-col"></view>
					</view>
				</view>
				<view class="text-wrapper_12 bb flex-col" @click="pay">
					<text class="text_30">立即支付</text>
				</view>
				<div class="group_13 flex-col"></div>
			</view>
			<payment :payMode='payMode' :pay_close="pay_close" :types="scene" @onChangeFun='onChangeFun'
				:order_id="orderNo" :totalPrice='allPrice'></payment>
		</view>
		<home></home>
	</view>
</template>
<script>
	import home from '@/components/home/index.vue'
	import {

		getUserInfo,

	} from "@/api/user";
	import payment from '@/components/payment/index.vue'
	import {
		postOrderComputed,
		orderCreate
	} from '@/api/order.js'
	import {
		coupotList
	} from '@/components/coupotList'
	import {
		getAdoptioniInfo
	} from '@/api/togeterRich/index.js'
	import swiperX from '@/components/com/swiperX.vue'
	export default {
		components: {
			swiperX,
			coupotList,
			payment,
			home
		},
		data() {
			return {
				pay_close: false,
				payMode: [{
						name: "微信支付",
						icon: "icon-weixinzhifu",
						value: 'weixin',
						title: '微信快捷支付'
					},
					{
						name: "余额支付",
						icon: "icon-yuezhifu",
						value: 'yue',
						title: '可用余额:',
						number: 0
					}
				],

				orderNo: '',
				id: '',
				allPrice: 0,
				preOrderNo: '',
				islookDk: false,
				dkIndex: 0,
				constants: {},
				dataInfo: {},
				dkData: {},
				countId: '',
				priceData: {},
				companyName: '',
				scene: ''
			};
		},
		onLoad(e) {
			this.id = e.id
			this.preOrderNo = e.preOrderNo
			this.init()
			// this.computePrice()
		},
		methods: {
			payClose: function() {
				this.pay_close = false;
			},
			goPay(pay_price, order_id) {
				this.$set(this, 'pay_close', true);
				this.$set(this, 'pay_order_id', order_id);
				this.$set(this, 'totalPrice', pay_price);

			},
			onChangeFun: function(e) {
				let opt = e;
				let action = opt.action || null;
				let value = opt.value != undefined ? opt.value : null;
				(action && this[action]) && this[action](value);
				if (e.data == true) {
					uni.showModal({
						title: '支付成功',
						content: '支付成功',
						cancelText: "返回首页", // 取消按钮的文字  
						confirmText: "查看订单", // 确认按钮的文字  
						showCancel: true, // 是否显示取消按钮，默认为 true
						confirmColor: '#f55850',
						cancelColor: '#39B54A',
						success: (res) => {
							if (res.confirm) {
								uni.reLaunch({
									url: '/pagesB/fosterOrder/index?status=10'
								});
							} else {
								uni.reLaunch({
									url: '/pages/index/index'
								});
								console.log('cancel') //点击取消之后执行的代码
							}
						}
					})
				}
				this.$set(this, 'pay_close', false);
			},
			getCountId(countId) {
				this.countId = countId
				this.computePrice()

			},
			computePrice() {
				let that = this
				let data1 = {
					preOrderNo: this.preOrderNo,
					countId: this.countId,
					shippingType: 2
				}
				postOrderComputed(data1).then(res => {

					that.priceData = res.data
					that.allprice = res.data.proTotalFee

					console.log(res.data.proTotalFee, '这是总价哇')
				})
			},
			init() {
				getUserInfo().then(res => {
					this.payMode[1].number = res.data.nowMoney

				})
				getAdoptioniInfo(this.id).then(res => {
					this.dataInfo = res.data
					this.allPrice = this.dataInfo.price
					this.dkData = this.dataInfo.areaList[0]
				})

			},
			pay() {
				let data = {
					addressId: 0,
					couponId: this.countId,
					mark: "",
					payChannel: "routine",
					payType: "yue",
					phone: "",
					preOrderNo: this.preOrderNo,
					realName: "",
					shippingType: 2,
					storeId: 0,
					useIntegral: false,
					companyName: this.companyName
				}
				orderCreate(data).then(res => {
					console.log(res, 'dddd')
					this.orderNo = res.data.orderNo
					this.scene = res.data.scene
					this.goPay()
				})
				console.log(this.companyName, 'companyName')
				return;
				uni.showModal({
					title: '支付成功',
					content: '支付成功',
					cancelText: "返回首页", // 取消按钮的文字  
					confirmText: "查看订单", // 确认按钮的文字  
					showCancel: true, // 是否显示取消按钮，默认为 true
					confirmColor: '#f55850',
					cancelColor: '#39B54A',
					success: (res) => {
						if (res.confirm) {
							console.log('comfirm') //点击确定之后执行的代码
						} else {
							console.log('cancel') //点击取消之后执行的代码
						}
					}
				})

			},
			lookDk() {
				this.islookDk = !this.islookDk
			},
			dkBtn(item, index) {
				if (item.isFull == true) {
					uni.showToast({
						title: "该地块已售罄,请选择其他地块",
						icon: 'none'
					})
				} else {
					this.islookDk = false
					this.dkIndex = index
					this.dkData = item
				}

			}
		},
	};
</script>
<style lang="scss" scoped>
	@import 'com/pay.css';
	@import '@/com/css/common.css';
	.bc{
			color: $maincolor !important;
		}
		.bgb{
			border: 2rpx solid $maincolor !important;
		}
		.bb{
			background: $maincolor;
		}
	.over {
		background: #f5f5f5;
		color: #fff;
	}

	.foot {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
	}

	.activeDk {
		background: $maincolor;
		color: #fff !important;
	}

	.dk {
		padding: 30rpx;
		background: #fff;

		.dkLook {
			height: 600rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.dk-wrap {
			width: 640rpx;
			display: flex;
			margin: 0 auto;
			overflow-x: scroll;

		}
	}
</style>